<template>
  <el-card class="box-card" style="margin: 15px">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>

    <div class="header">
      <div class="left">
        <el-image :src="detail.headImgUrl" class="image" />
        <div style="padding: 14px">
          <span style="font-size: 16px">{{ detail.memberName }}</span>
          <div class="bottom clearfix" style="margin-top: 10px">
            <time class="time" style="font-size: 14px">{{ detail.phone }}</time>
          </div>
        </div>
      </div>
      <div class="list">
        <p>会员卡号：{{ detail.memberCardNum }}</p>
        <p>会员等级：{{ detail.levelName }}</p>
        <p>余额：{{ detail.rechargeBalance }}</p>
      </div>
    </div>
    <el-form :inline="true" class="demo-form-inline" style="margin-top: 30px">
      <el-form-item label="真实姓名">
        <el-input v-model="form.memberName" placeholder="真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.idCard" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="状态">
        <el-select placeholder="状态">
          <el-option label="正常" value="0-"></el-option>
          <el-option label="锁定" value="1"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submit">编辑</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showCard()"
          >查看卡信息</el-button
        >
      </el-form-item>
    </el-form>

    <h3>账单</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="businessType" label="订单类型"> </el-table-column>
      <el-table-column prop="orderType" label="收支类型"> </el-table-column>
      <el-table-column prop="payAmount" label="金额"> </el-table-column>
      <el-table-column prop="redPackedAmount" label="红包"> </el-table-column>
      <el-table-column prop="itemName" label="消费项目"> </el-table-column>
      <el-table-column prop="createTime" label="时间"> </el-table-column>
      <el-table-column prop="payType" label="支付方式">
        <template slot-scope="scope">
          {{ getPayType(scope.row.payType) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right; justify-content: flex-end">
      <el-pagination
        @size-change="getBill"
        @current-change="getBill"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <CaedList ref="cardList" />
  </el-card>
</template>
<script>
import { getMemberInfo, updateMemberInfo, getMemberBillList } from '@/config/api'

import { times, divide } from "@/utils/tools"
import CaedList from '../list/cardList.vue'

export default {
  components: {

    CaedList
  },
  data () {
    return {
      tableData: [],
      detail: {},
      form: {
        memberName: undefined,
        idCard: undefined,
        sex: undefined,
        id: undefined
      },
      queryParams: {
        page: 1,
        pageSize: 10,
        platformMemberId: undefined
      },
      total: 0
    }
  },
  created () {
    this.getData()
  },
  methods: {
    showCard () {
      console.log(this.detail)
      this.$refs.cardList.show(this.detail.phone)
    },
    getData () {
      getMemberInfo({ platformMemberId: this.$route.query.id }).then(res => {
       if(res.data.result.rechargeBalance){
        res.data.result.rechargeBalance = divide(res.data.result.rechargeBalance, 100)

       }
        this.detail = res.data.result
        this.form = {
          memberName: this.detail.memberName,
          idCard: this.detail.idCard,
          sex: this.detail.sex,
          id: this.detail.id
        }
        this.queryParams.platformMemberId = this.$route.query.id
        this.getBill()
      })
    },
    getPayType (index) {
      let str = ''
      switch (index) {
        case "1":
          str = "支付宝"
          break;
        case "2":
          str = "微信"
          break;
        case "3":
          str = "银联"
          break;
        case "4":
          str = "余额"
          break;
        case "5":
          str = "现金"
          break;

      }
      return str
    },
    getBill () {
      getMemberBillList(this.queryParams).then(res => {
        res.data.result.list.map(item => {
          item.payAmount = divide(item.payAmount || 0, 100)
          item.redPackedAmount = divide(item.redPackedAmount || 0, 100)
        })
        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },
    submit () {
      this.$confirm('此操作将修改会员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateMemberInfo(this.form).then(res => {
          this.getData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
}
.image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
}
.list {
  display: flex;
  align-items: center;
  p {
    margin-right: 50px;
    font-weight: bold;
    font-size: 20px;
  }
}
</style>